<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="w-screen min-h-screen">
  <div class="w-full h-full p-4 flex flex-col gap-2 bg-slate-200 selection:bg-amber-300 selection:text-amber-900">
    <div
      class="rounded size-20 bg-red-500 text-sm text-white flex items-center justify-center hover:bg-red-600 cursor-pointer">
      你好
    </div>
    <input type="text"
      class="bg-neutral-700 placeholder:italic placeholder:text-yellow-200  px-2 outline focus:outline-2 focus:outline-sky-500"
      placeholder="请聚焦这里..." />
    <button
      class="bg-sky-500 active:bg-pink-500 font-semibold tracking-wider leading-normal text-center">button</button>
    <!-- 绝对定位 -->
    <div class="relative  border-2 border-orange-600 w-[200px] h-[200px] mx-auto">
      <div class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] size-20 bg-amber-500 truncate">
        fsdfdsfsdfdshgd打算过奋斗</div>
    </div>
  </div>
</body>

</html>